{% extends "layouts/base.html" %}

{% block title %} UI Toasts {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}	

	<!-- [ Main Content ] start -->
	<div class="pcoded-main-container">
		<div class="pcoded-content">
			<!-- [ breadcrumb ] start -->
			<div class="page-header">
				<div class="page-block">
					<div class="row align-items-center">
						<div class="col-md-12">
							<div class="page-header-title">
								<h5 class="m-b-10">Toasts</h5>
							</div>
							<ul class="breadcrumb">
								<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
								<li class="breadcrumb-item"><a href="#!">Basic Components</a></li>
								<li class="breadcrumb-item"><a href="#!">Toasts</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- [ breadcrumb ] end -->
			<!-- [ Main Content ] start -->
			<div class="row">
				<!-- [ toasts ] start -->
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<h5>Toasts</h5>
						</div>
						<div class="card-body">
							<div class="bg-light p-4 mb-2" style="height:150px;">
								<div class="toast hide toast-1" role="alert" aria-live="assertive" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap</strong>
										<small>11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
							</div>
							<button class="btn  btn-primary" onclick="$('.toast-1').toast('show')">click</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<h5>Translucent</h5>
						</div>
						<div class="card-body">
							<div class="bg-dark p-4 mb-2" style="height:150px;">
								<div class="toast hide toast-2" role="alert" aria-live="assertive" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
							</div>
							<button class="btn  btn-primary" onclick="$('.toast-2').toast('show')">click</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<h5>Stacking</h5>
						</div>
						<div class="card-body">
							<div class="bg-light p-4 mb-2" style="height:250px;">
								<div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
								<div class="toast hide toast-3" role="alert" aria-live="assertive" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
							</div>
							<button class="btn  btn-primary" onclick="$('.toast-3').toast('show')">click</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<h5>Data-delay</h5>
						</div>
						<div class="card-body">
							<div class="bg-light p-4 mb-2" style="height:250px;">
								<div class="toast hide toast-1s" role="alert" aria-live="assertive" data-delay="1000" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap 1s</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
								<div class="toast hide toast-3s" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap 3s</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
								<div class="toast hide toast-5s" role="alert" aria-live="assertive" data-delay="5000" aria-atomic="true">
									<div class="toast-header">
										<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
										<strong class="mr-auto">Bootstrap 5s</strong>
										<small class="text-muted">11 mins ago</small>
										<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
											<span>&times;</span>
										</button>
									</div>
									<div class="toast-body">
										Hello, world! This is a toast message.
									</div>
								</div>
							</div>
							<button class="btn  btn-primary" onclick="$('.toast-1s').toast('show')">1 sec</button>
							<button class="btn  btn-primary" onclick="$('.toast-3s').toast('show')">3 sec</button>
							<button class="btn  btn-primary" onclick="$('.toast-5s').toast('show')">5 sec</button>
						</div>
					</div>
				</div>
				<div class="col-sm-12">
					<div class="card">
						<div class="card-header">
							<h5>Placement</h5>
						</div>
						<div class="card-body btn-page">
							<div class="position-relative bg-light p-4 mb-2" style="height:300px;">
								<div style="position:absolute;top:40px;left:40px">
									<div class="toast hide toast-left" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
										<div class="toast-header">
											<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
											<strong class="mr-auto">Bootstrap</strong>
											<small class="text-muted">11 mins ago</small>
											<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
												<span>&times;</span>
											</button>
										</div>
										<div class="toast-body">
											Hello, world! This is a toast message.
										</div>
									</div>
								</div>
								<div class="d-flex justify-content-center" style="position:absolute;top:40px;left:40px;right:40px">
									<div class="toast hide toast-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
										<div class="toast-header">
											<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
											<strong class="mr-auto">Bootstrap</strong>
											<small class="text-muted">11 mins ago</small>
											<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
												<span>&times;</span>
											</button>
										</div>
										<div class="toast-body">
											Hello, world! This is a toast message.
										</div>
									</div>
								</div>
								<div style="position:absolute;top:40px;right: 40px">
									<div class="toast hide toast-right" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
										<div class="toast-header">
											<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
											<strong class="mr-auto">Bootstrap</strong>
											<small class="text-muted">11 mins ago</small>
											<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
												<span>&times;</span>
											</button>
										</div>
										<div class="toast-body">
											Hello, world! This is a toast message.
										</div>
									</div>
								</div>
								<div class="d-flex justify-content-center align-items-center" style="min-height:100%;position:absolute;top:0px;right: 0px;left:0">
									<div class="toast hide toast-align-center" role="alert" aria-live="assertive" data-delay="3000" aria-atomic="true">
										<div class="toast-header">
											<img src="/static/assets/images/favicon.ico" alt="" class="img-fluid m-r-5" style="width:20px;">
											<strong class="mr-auto">Bootstrap</strong>
											<small class="text-muted">11 mins ago</small>
											<button type="button" class="m-l-5 mb-1 mt-1 close" data-dismiss="toast" aria-label="Close">
												<span>&times;</span>
											</button>
										</div>
										<div class="toast-body">
											Hello, world! This is a toast message.
										</div>
									</div>
								</div>
							</div>
							<button class="btn  btn-primary" onclick="$('.toast-left').toast('show')">Left</button>
							<button class="btn  btn-primary" onclick="$('.toast-center').toast('show')">Center</button>
							<button class="btn  btn-primary" onclick="$('.toast-right').toast('show')">Right</button>
							<button class="btn  btn-primary" onclick="$('.toast-align-center').toast('show')">Center Align</button>
						</div>
					</div>
				</div>
				<!-- [ toasts ] end -->
			</div>
			<!-- [ Main Content ] end -->
		</div>
	</div>
	<!-- [ Main Content ] end -->

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}
